<template>
	<view class="content">
		<view class="card p15">
			<view class="flex">
				<image class="top-icon" src="../../static/icon/shijian1.png" mode="aspectFill"></image>
				<view class="f14"><text style="color:#656565 ;">时间：</text><text>{{clock}}</text></view>
			</view>
			<view class="line">
			</view>
			<view class="flex">
				<image class="top-icon" src="../../static/icon/dizhi1.png" mode="aspectFill"></image>
				<view class="f14 row1"><text style="color:#656565 ;">地点：</text><text>{{question.address}}</text></view>
			</view>
		</view>
		<view class="card p15" style="margin-top: 20rpx;">
			<view>
				<view class="flex">
					<image class="top-icon" src="../../static/icon/zhuangtai.png" mode="aspectFill"></image>
					<view class="f14"><text style="color:#656565 ;">状态：</text>
					</view>
					<view style="width:78%;">
						<ep-picker :options="options" v-model="city" @change="onChange"></ep-picker>
					</view>
				</view>
			</view>

			<!-- 折叠面板 -->
			<uni-collapse style="margin-top: 20rpx;">
				<uni-collapse-item title="问题类型" :open="true">
					<!-- 折叠内容 -->
					<view>
						<!-- 多选，循环遍历填充数据 -->
						<view class="list-box">
							<view v-for="(item,index) in list" :key="index" @click="choice(index,item.id)"
								:class="[item.selected?'selde':'noselde']">
								{{item.selected?item.title:item.title}}
							</view>
						</view>
						<!-- 选中的值 -->
						<!-- <view class="valueList">
							{{selectList}}
						</view> -->
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="card p15" style="margin-top: 20rpx;">
			<textarea v-model="desc" style="width: 100%;height: 150rpx;" placeholder="请填写巡边发现问题的描述"
				placeholder-style="font-size:28rpx"></textarea>
			<easy-upload :isImmediate="isImmediate" :dataList="imageList" types="image"
				:uploadUrl="helper.host+'/api/common/upload'" @onUploadSuccess="successFails"
				@onDelSuccess="deleteFails" :uploadMaxCount="uploadMaxCount">
				<template v-slot:uploadBtn>
					<view class="upload-btn">上传</view>
				</template>
			</easy-upload>
		</view>
		<view class="card p15" style="margin-top: 20rpx;">
			<view>视频：</view>
			<htz-image-upload mediaType="video" :max="1" v-model="videoList" @uploadSuccess="ceshiUploadSuccess"
				:action="helper.host+'/api/common/upload'"></htz-image-upload>
		</view>
		<view class="report card" @click="shangbao()">
			上报
		</view>
	</view>
</template>

<script>
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import QQMapWX from '../../libs/qqmap-wx-jssdk/qqmap-wx-jssdk.js';
	// import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import myIssue from '@/components/myIssue.vue';
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';

	export default {
		components: {
			// uniPopup,
			myIssue,
			htzImageUpload
		},
		data() {
			return {
				isImmediate: true,
				uploadMaxCount: 9,
				imageList: [],
				videoList: [],
				// quyu:'',
				map: {
					latitude: '116.4',
					longitude: '39.9',
					covers: [],
					scale: 16
				},
				qqmapsdk: {},
				address: '',
				time: '',
				clock: '',
				select: '',
				// options1: [{
				// 	value: "1",
				// 	label: "河北省石家庄市新华区‘’‘’"
				// }],
				city: "",
				options: [],
				//定义前端选中的值
				selectList: "",
				//给标签赋值
				list: [],
				selectId: [],
				helper: [],
				desc: '',
				reportid: 0,
				question: [],
			}
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.clock = _this.time1();
			}, 1000);
		},
		onLoad(op) {
			this.helper = helper;
			this.initSdk();
			this.time1();
			this.reportid = op.reportid;
			this.question = JSON.parse(op.question)
			var _this = this;
			this.find_status();
			this.find_type();

		},
		methods: {
			ceshiUploadSuccess(res) { //上传成功
				/****************
				因为上传接口返回的结构不一致，所以以下代码需要根据实际的接口返回结构开发，在此只是展示如果给数组里添加的过程，仅供参考
				***************/
				console.log('ceshiUploadSuccess',res)
				var _res = JSON.parse(res.data);
				console.log('ceshiUploadSuccess1',_res.data.fullurl)
				if (_res.code == 1) {
					this.videoList.push(_res.data.fullurl);
				}
				/*******************************/
			},
			
			initSdk() {
				this.qqmapsdk = new QQMapWX({
					key: helper.config.qqmapsdk.key
				});
			},
			//发现问题状态
			async find_status() {
				var _this = this;
				var res = await api.find_status();
				_this.options = res.data;
			},
			//发现问题类型
			async find_type() {
				var _this = this;
				var res = await api.find_type();
				this.list = res.data;
			},
			change(e) {
				console.log('select = ', this.select)
			},
			onChange() {
				console.log(this.city)
			},
			//选择按钮
			choice(index) {
				//当再次被选中时，取消当前选中项
				if (this.list[index].selected == true) {
					this.list[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectId.length; i++) {
						if (this.selectId[i] === this.list[index].id) {
							this.selectId.splice(i, 1);

						}
					}
					// this.selectList = this.selectId
					console.log("选中的值", this.selectId)
				} else {
					this.list[index].selected = true;
					this.selectId.push(this.list[index].id)
					for (var i = 0; i < this.selectId.length; i++) {
						// console.log("选中的值", this.selectId[i])
					}
					// this.selectList = this.selectId
					console.log("选中的值", this.selectId)
				}
			},
			//上报
			async shangbao() {
				var _this = this;
				var res = await api.up_q({
					uptime: _this.clock, //时间
					address: _this.question.address, //地点
					title: _this.question.description, //地点
					longitude: _this.question.longitude, //地点
					latitude: _this.question.latitude, //地点
					q_status_id: _this.city, //状态
					q_type_id: _this.selectId, //类型
					desc: _this.desc, //描述
					images: _this.imageList, //图片
					video: _this.videoList, //图片
					report_id: _this.reportid //巡边记录id
				});
				if (res.code == 1) {
					uni.showToast({
						title: '上报成功',
						success() {
							uni.navigateBack()
						}
					})
				} else {
					uni.showToast({
						title: '上报失败',
					})
				}
			},
			//当前时间
			time1() {
				let date = new Date();
				// 获取当前月份
				var nowMonth = date.getMonth() + 1;

				// 获取当前是几号
				let strDate = date.getDate();

				// 添加分隔符“-”
				var seperator = "-";

				// 对月份进行处理，1-9月在前面添加一个“0”
				if (nowMonth >= 1 && nowMonth <= 9) {
					nowMonth = "0" + nowMonth;
				}
				// 对天进行处理，1-9号在前面添加一个“0”
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}


				//获取小时
				let strHours = date.getHours();
				//获取分钟
				let strMinu = date.getMinutes();
				//获取秒
				let strMill = date.getSeconds();

				// 对小时进行处理，1-9月在前面添加一个“0”
				if (strHours >= 1 && strHours <= 9) {
					strHours = "0" + strHours;
				}
				// 对分钟进行处理，1-9号在前面添加一个“0”
				if (strMinu >= 0 && strMinu <= 9) {
					strMinu = "0" + strMinu;
				}
				// 对秒进行处理，1-9号在前面添加一个“0”
				if (strMill >= 0 && strMill <= 9) {
					strMill = "0" + strMill;
				}
				// 添加分隔符“:”
				var seperator1 = ":";
				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				return date.getFullYear() + seperator + nowMonth + seperator + strDate + ' ' + strHours + seperator1 +
					strMinu + seperator1 + strMill;
			},
			successFails(list) {
				const res = list.map(item => {
					let resItem = JSON.parse(item);
					return resItem.data.url;
				});
				this.imageList = this.imageList.concat(res);
				console.log(this.imageList);
			},
			deleteFails(e) {
				console.log(e)
				// const { data, index} = e;
				var index = e;
				this.imageList.splice(index, 1)
			}
		}

	}
</script>

<style scoped>
	.p15 {
		padding: 30rpx;
	}

	.card {
		background-color: #ffffff;
	}

	.top-icon {
		height: 42rpx;
		width: 42rpx;
		margin-right: 12rpx;
	}

	.camera {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -36rpx;
		margin-left: -34rpx;
	}

	.upload {
		width: 110rpx;
		height: 110rpx;
		border: 2rpx solid #989898;
		border-radius: 8rpx;
		text-align: center;
		position: relative;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;

	}

	.list-box>view {
		margin: 6rpx;
	}

	.selde {
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		height: 54rpx;
		line-height: 50rpx;
		border: 1px solid #4DA9EC;
		color: #FFFFFF;
		background-color: #4DA9EC;
	}

	/* 未选择 */
	.noselde {
		border: 1px solid #959595;
		background: #FFFFFF;
		color: #959595;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 30rpx;
		height: 54rpx;
		line-height: 50rpx;
	}

	.valueList {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
		margin: 20rpx 0;
	}

	.report {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #4DA9EC;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>